<template>
	<view class="entering-container">
		<view class="title">录入订单 </view>

		<view class="content">
			<view class="form-item">
				<view class="label">选择商品：</view>
				<view class="inputValue">
					<!-- <input type="text" :disable="true" /> -->
					<view class="btn" @click="handlerChooseClick">选择</view>
				</view>
			</view>
			<view class="form-item">
				<view class="label">已选商品：</view>
				<view class="inputValue for-goods">
					<view class="iv-item" v-for="(item, id) in goods_lists">
						<image :src="item.pic" mode="scaleToFill" />
						<text class="ivi-title">{{ item.name }}</text>
						<view class="ivi-close" @tap="removeGoods(id)">X</view>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="label">商品总价：</view>
				<view class="inputValue">
					<input type="number" v-model="formData.totalprice" />
				</view>
			</view>

			<!-- 发件人 -->
			<view class="form-item">
				<view class="label">发件人姓名：</view>
				<view class="inputValue">
					<input type="text" v-model="formData.flinkman" />
				</view>
			</view>
			<view class="form-item">
				<view class="label">发件人电话：</view>
				<view class="inputValue">
					<input type="text" v-model="formData.ftel" />
				</view>
			</view>
			<view class="form-item">
				<view class="label">发件人地址：</view>
				<view class="inputValue">
					<input type="text" v-model="formData.faddress" class="longInputClass" />
				</view>
			</view>
			<!-- 收件人 -->
			<view class="form-item">
				<view class="label">收货人姓名：</view>
				<view class="inputValue">
					<input type="text" v-model="formData.linkman" />
				</view>
			</view>
			<view class="form-item">
				<view class="label">收货人电话：</view>
				<view class="inputValue">
					<input type="text" v-model="formData.tel" />
				</view>
			</view>
			<view class="form-item">
				<view class="label">收货地址：</view>
				<view class="inputValue">
					<input type="text" v-model="formData.address" class="longInputClass" />
				</view>
			</view>
			<view class="form-item">
				<view class="label">配送方式：</view>
				<view class="inputValue">
					<input type="text" v-model="formData.freight" />
				</view>
			</view>
			<view class="form-item">
				<view class="label">配送费：</view>
				<view class="inputValue">
					<input type="number" v-model="formData.freightprice" />
				</view>
			</view>
		</view>
		<view class="save" @click="saveClick">
			<text>确定录入</text>
		</view>
		<view class="save red" @click="backOrderCenter" v-if="from_oids.length > 0">
			<text>返回结算中心</text>
		</view>
		<uni-popup ref="popup" type="center" background-color="#fff">
			<view class="popup-content">
				<scroll-view class="list" style="width: 700rpx" scroll-y scroll-x>





					<uni-table style="width: 750rpx" v-if="isShow" border stripe emptyText="暂无更多数据">
						<!-- 表头行 -->
						<uni-tr>
							<uni-th width="50" align="center">ID</uni-th>
							<uni-th width="150" align="center">商品信息</uni-th>
							<uni-th width="80" align="left">状态</uni-th>
							<uni-th width="80" align="left">操作</uni-th>
						</uni-tr>
						<!-- 表格数据行 -->
						<uni-tr v-for="(item, index) in tableData">
							<uni-td>{{ item.id }}</uni-td>
							<uni-td class="info">
								<image class="img" :src="item.pic" mode="scaleToFill" />
								<text>{{ item.name }}</text>
							</uni-td>

							<uni-td>{{ item.status == 1 ? '已上架' : '未上架' }}</uni-td>
							<uni-td>
								<button class="btn" @click="chooseClick(item)" type="params">选择</button>
							</uni-td>
						</uni-tr>
					</uni-table>

					<view v-else>
						
						<view v-for="(item, index) in tableData2">
							<view class="gui-border-radius-large"
								style="padding-left: 20rpx;padding-right: 20rpx;background: #cccff9;margin-left: 20rpx;margin-right: 20rpx;margin-bottom: 20rpx;">

								<view class="ysh_row  " style="padding-left: 20rpx;">
									
									<view class="ysh_fill" style="padding-left: 10rpx;padding-right: 20rpx;">
										<view class="ysh_row h50">
											<view style="width: 120rpx;">规格</view>
											<view class="gui-border-b  ysh_fill">
												
												{{item.name}}
											</view>
										</view>
										<view class="ysh_row h50">
											<view style="width: 120rpx;">销售价</view>
											<view class="gui-border-b ysh_fill">
												<input type="text" v-model="item.sell_price" />
											</view>
										</view>
										<view class="ysh_row h50">
											<view style="width: 120rpx;">库存</view>
											<view class="gui-border-b ysh_fill">
												<input type="text" v-model="item.stock" />
											</view>
										</view>

									</view>
								</view>
								<div class="ysh_row">
									<view class="ysh_row h50 ysh_fill">
										<view style="width: 140rpx;">购买数量</view>
										<view class="gui-border-b ysh_fill">
											<input type="text" v-model="item.number" />
										</view>
									</view>
									<view class="ysh_row h50  ysh_fill">
										<view style="width: 80rpx;">库存</view>
										<view class="gui-border-b ysh_fill">
											<input type="text" v-model="item.stock" />
										</view>
									</view>
								</div>


							</view>

						</view>
						<view class="ysh_center" style="padding-bottom: 25rpx;">

							<view class="btn" style="width: 200rpx;" @click="confirmok">确定</view>
						</view>
					</view>
					<!-- <uni-table style="width: 750rpx" class="table" v-else border stripe emptyText="暂无更多数据">
						
						<uni-tr>
							<uni-th width="150" align="center">规格</uni-th>
							<uni-th width="80">库存</uni-th>
							<uni-th width="100" align="left">销售价</uni-th>
							<uni-th width="100" align="left">购买数量</uni-th>
							<uni-th width="80" align="left">操作</uni-th>
						</uni-tr>
					
						<uni-tr v-for="(item, index) in tableData2" :index="index">
							<uni-td>{{ guigename }}</uni-td>

							<uni-td style="text-align: center">{{ item.stock }}</uni-td>
							<uni-td>{{ item.market_price }}</uni-td>
							<uni-td>
								<input type="number" v-model="num[index]" class="inputClass" />

							</uni-td>
							<uni-td>
								<view class="btn" @click="confirm(item,index)">确定</view>
							</uni-td>
						</uni-tr>
					</uni-table> -->
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	var app = getApp()

	export default {
		
		data() {
			return {
				
				guigename: '',
				formData: {
					mid: '',
					goodsprice: 0,
					linkman: '',
					tel: '',
					address: '',
					flinkman: '',
					ftel: '',
					faddress: '',
					freight: '商家配送',
					freightprice: 0,
					prodata: '', //商品id
					paytype: '线下支付',
					paytime: '',
					prodata: '',
					totalprice: ''
				},
				goods_lists: {},
				goods_lists2: [],
				cur_goods_idx: 0,
				titleList: [{
						name: 'ID'
					},
					{
						name: '商品信息'
					},
					{
						name: '创建时间'
					},
					{
						name: '状态'
					},
					{
						name: '操作'
					}
				],
				isShow: true,
				tableData: [],
				tableData2: [],
				num: [],
				goodImgData: {},
				from_oids: []
			}
		},
		onLoad(options) {
			
			options = options || {}
			this.from_oids = options.from_oids ? options.from_oids.split(',') : []
			this.getId()
		},
		methods: {
			// confirm(item, index) {
			// 	console.log(this.num)
			// 	this.goods_lists[this.cur_goods_idx].num = this.num[index]
			// 	this.goods_lists[this.cur_goods_idx].guige_id = item.id

			// 	for (var idx in this.tableData2) {
			// 		var _item = this.tableData2[idx]
			// 		this.goods_lists2.push(_item)
			// 		//三元表达式判断是否有num 如果有则赋值给num 如果没有则赋值为0
			// 		this.goods_lists2[idx].num = this.num[idx] > 0 ? this.num[idx] : 0
			// 		this.goods_lists2[idx].guige_id = item.id
			// 	}
			// 	this.updateStatis()
			// 	//this.formData.totalprice = item.market_price * this.num;
			// 	//this.formData.goodsprice = item.market_price * this.num;
			// 	this.$refs.popup.close()
			// 	console.log(this.goods_lists2)
			// 	console.log(item)
			// },
			confirmok() {
				console.log('ddssssssssssssssssssssss1:');
				//console.log('ddssssssssssssssssssssss2:',tab);
				 console.log('ddssssssssssssssssssssss:',this.tableData2)
				// for (let i; i < this.tableData2.length; i++) {
				// 	console.log('sdsd:', this.tableData2[i])
				// 	if (this.tableData2[i].number !== undefined) {
				// 		console.log('idx.number:', this.tableData2[i].number)
				// 	}
				// }
				// return;
				// console.log(this.num)
				// this.goods_lists[this.cur_goods_idx].num = this.num[index]
				// this.goods_lists[this.cur_goods_idx].guige_id = item.id

				// for (var idx in this.tableData2) {
				// 	var _item = this.tableData2[idx]
				// 	this.goods_lists2.push(_item)
				// 	//三元表达式判断是否有num 如果有则赋值给num 如果没有则赋值为0
				// 	this.goods_lists2[idx].num = this.num[idx] > 0 ? this.num[idx] : 0
				// 	this.goods_lists2[idx].guige_id = item.id
				// }
				// this.updateStatis()
				// //this.formData.totalprice = item.market_price * this.num;
				// //this.formData.goodsprice = item.market_price * this.num;
				// this.$refs.popup.close()
				// console.log(this.goods_lists2)
				// console.log(item)
			},

			backOrderCenter() {
				app.goto('/pagesExt/my/payorder')
			},
			updateStatis() {
				this.formData.totalprice = 0
				this.formData.goodsprice = 0
				console.log(this.formData)

				for (var idx in this.goods_lists2) {
					var _item = this.goods_lists2[idx]
					this.formData.totalprice += _item.market_price * _item.num
					this.formData.goodsprice += _item.market_price * _item.num
					console.log(_item)

				}
				console.log(this.formData.goodsprice)
				this.goods_lists2 = []
			},
			removeGoods(id) {
				app.confirm('确定移除吗?', () => {
					delete this.goods_lists[id]
					this.updateStatis()
				})
			},
			getId() {
				const {
					id
				} = uni.getStorageSync('user')
				this.formData.mid = id
			},
			handlerChooseClick() {
				//console.log(app.globalData.pre_url);
				this.$refs.popup.open()
				this.isShow = true
				app.get('ApiFinance/getsplist', {}, (customs) => {
					console.log(customs, 'customs')
					this.tableData = customs.data
					console.log(customs.data, 'data')
				})
			},
			searchClick() {},
			saveClick() {
				let that = this
				this.formData.paytime = Date.now()

				this.formData.prodata = []
				for (var idx in this.goods_lists) {
					var _item = this.goods_lists[idx]
					this.formData.prodata.push(_item.id + ',' + _item.guige_id + ',' + _item.num)
				}
				this.formData.prodata = this.formData.prodata.join('-')

				console.log(' ', this.formData)

				app.post(
					'ApiFinance/save', {
						...this.formData
					},
					(res) => {
						console.log(res)
						if (res.status == 0) {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								mask: true
							})
							return
						}

						var oids = []
						if (that.from_oids && that.from_oids.length > 0) {
							for (var idx in that.from_oids) {
								oids.push(that.from_oids[idx])
							}
						}
						oids.push(res.msg)

						uni.setStorageSync('tmp_oids', oids.join(','))

						setTimeout(() => {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								mask: true
							})
							app.goto('/pages/my/payorder')
						}, 150)
					}
				)
			},
			chooseClick(item) {
				//console.log(item);
				const {
					id
				} = item
				this.goods_lists[id] = item
				this.cur_goods_idx = id
				this.goodImgData = item
				this.isShow = false
				app.post(
					'ApiFinance/getproduct', {
						proid: id
					},
					(customs) => {
						this.tableData2 = customs.gglist
						//console.log('tableData2:',JSON.stringify( this.tableData2))
						this.guigename = customs.guigedata[0].items[0].title
						console.log(customs, 'customs')
					}
				)
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}

	.h50 {
		height: 70rpx;
		line-height: 70rpx;
	}

	.gui-border-radius-small {
		border-radius: 6rpx;
	}

	.gui-border-radius {
		border-radius: 10rpx;
	}

	.gui-border-radius-large {
		border-radius: 20rpx;
	}

	.ysh_row {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.ysh_center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.ysh_fill {
		flex: 1;
	}

	.gui-border {
		border: 1rpx solid #F1F2F3;
	}

	.gui-border-l {
		border-left: 1rpx solid #F1F2F3;
	}

	.gui-border-r {
		border-right: 1rpx solid #F1F2F3;
	}

	.gui-border-t {
		border-top: 1rpx solid #F1F2F3;
	}

	.gui-border-b {
		border-bottom: 1rpx solid #F1F2F3;
	}

	.gui-noborder {
		border: none !important;
	}

	.entering-container {
		padding: 20rpx;
		box-sizing: border-box;

		.title {
			font-size: 30rpx;
			font-weight: bold;
			border-bottom: 2rpx solid #f1f1f1;
			padding: 20rpx;
			box-sizing: border-box;
		}

		.content {
			.form-item {
				display: flex;
				// justify-content: flex-end;
				padding: 20rpx 30rpx;
				box-sizing: border-box;

				.label {
					font-size: 26rpx;
					font-weight: 400;
					width: 160rpx;
					flex-shrink: 0;
				}

				.inputValue {
					display: flex;

					image {
						width: 100rpx;
						height: 100rpx;
					}

					input {
						border: 1rpx solid #e4e4e4;
						height: 60rpx;
						padding: 10rpx;
						box-sizing: border-box;
						width: 280rpx;
						font-size: 20rpx;
						margin-right: 20rpx;
					}

					.longInputClass {
						width: 400rpx;
					}

					.btn {
						font-size: 26rpx;
						font-weight: 400;
						border: 1rpx solid #e4e4e4;
						text-align: center;
						display: flex;
						justify-content: center;
						align-items: center;
						padding: 10rpx;
						box-sizing: border-box;
					}
				}
			}
		}

		.iv-item {
			width: 30%;
			display: flex;
			flex-direction: column;
			border: 0.01rem solid #e7e7e7;
			justify-content: center;
			text-align: center;
			position: relative;
			margin-right: 0.5rem;
			float: left;
			margin-bottom: 0.8rem;
		}

		.iv-item image {
			width: 3rem;
			height: 3rem;
			margin-left: auto;
			margin-right: auto;
			padding: 0.25rem;
		}

		.ivi-title {
			text-align: center;
			border-top: 0.01rem solid #dddddd;
			background-color: #e3e3e3;
		}

		.ivi-close {
			width: 1rem;
			height: 1rem;
			position: absolute;
			right: -0.5rem;
			top: -0.5rem;
			background-color: red;
			color: white;
			text-align: center;
			line-height: 1rem;
			border-radius: 0.25rem;
			z-index: 1;
		}

		.ivi-close:active {
			background-color: darkred;
		}

		.inputValue.for-goods {
			height: auto;
			display: block !important;
			width: 100%;
		}

		.save {
			width: 400rpx;
			height: 80rpx;
			font-size: 26rpx;
			color: #fff;
			background-color: #334ed1;
			border-radius: 60rpx;
			text-align: center;
			margin: 50rpx auto;
			line-height: 80rpx;
		}

		.save.red {
			background-color: red;
		}

		.popup-content {
			background-color: #fff;
			// width: 600rpx;
			border-radius: 30rpx;

			.search {
				height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				input {
					border-radius: 20rpx;
					height: 60rpx;
					box-sizing: border-box;
					padding: 10rpx;
					border: 1rpx solid #e4e4e4;
				}

				display: flex;

				.name {
					font-size: 28rpx;
					margin-left: 20rpx;
				}
			}

			.list {
				width: 700rpx;
				height: 900rpx;
				padding: 30rpx 0;
				box-sizing: border-box;

				.inputClass {
					display: flex;
					width: 80rpx;
					border: 1rpx solid #e4e4e4;
				}

				.img {
					width: 100rpx;
					height: 100rpx;
				}

				.info {
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.btn {
					padding: 8rpx;
					box-sizing: border-box;
					font-size: 24rpx;
					border: 1rpx solid #ccc;
					border-radius: 10rpx;
					text-align: center;
				}

				.table {
					height: 100%;
				}
			}
		}
	}
</style>